<template>
	<view class="home">
		<u-sticky offset-top="0">
			<view class="tophead">
				<uni-icons type="left" color="#666" size="26" @click="retFn"></uni-icons>
				<view class="">
					上传测流断面
				</view>
				<view class="" style="width: 100rpx;display: flex;justify-content: flex-end;align-items: center;">
					<!-- 					<view class="" style="margin-right: 20rpx;">
						<uni-icons type="calendar" color="#000000" size="26" @click="flowRecordingFn('本地历史记录')"></uni-icons>
					</view> -->
					<view class="" style="margin-right: 20rpx;">
						<uni-icons type="gear-filled" color="#000000" size="26" @click="cheshowFn"></uni-icons>
					</view>
				</view>
			</view>
		</u-sticky>
		<!-- 抽屉断面信息列表 -->
		<uni-drawer ref="showRight" mode="left" :mask-click="false" :width="350" maskClick>
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="drebox">
					<!-- 标题 -->
					<view class="title_box">
						<view class="bode"></view>
						<view class="text">
							选择类型：
						</view>
					</view>
					<!-- 数据内容 -->
					<view class="dataContent">
						<button-checkbox :list="leixRange" mode="single" :value="leixValue" @change="leixchange" />
					</view>
		
					<!-- 标题 -->
<!-- 					<view class="title_box">
						<view class="bode"></view>
						<view class="text">
							测站
						</view>
					</view> -->
					<!-- 数据内容 -->
<!-- 					<view class="dataContent">
						<button-checkbox :list="cheZhanRange" mode="single" :value="cheZhanValue"
							@change="cheZHANchange" />
					</view> -->
					<!-- 确定 -->
					<view class="" style="padding: 20rpx;">
						<u-button type="success" shape="circle" color="#33498d" @click="closeDrawer"
							text="取消"></u-button>
					</view>
		
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leixValue: null, //类型
				leixRange: [{
					label: '测站',
					value: 0
				}, {
					label: '灌溉站',
					value: 1
				}],
			}
		},
		onLoad(option) {

		},
		methods: {
			leixchange(){
				
			},
			// 选择断面
			cheshowFn() {
				this.$refs.showRight.open()
			},
			// 取消
			closeDrawer() {
				this.$refs.showRight.close();
			},
			retFn(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style scoped lang="scss">
	.tophead {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 60rpx 20rpx 10rpx 20rpx;
		color: #000000;
		background-color: #f3f3f3;
	}
	.title_box {
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		margin: 80rpx 0 10rpx 30rpx;
		border-bottom: rgba(106, 113, 138, 0.1) solid 1rpx;
		color: #33498d;
	
		.bode {
			width: 10rpx;
			height: 40rpx;
			border-radius: 50rpx;
			background-color: #33498d;
		}
	
		.text {
			padding: 5rpx 20rpx;
		}
	}
</style>
<style>
	page {
		background-color: #f2f1f6;
	}
</style>